<template>
  <!-- 头部 -->
  <div class="zxt-first">
    <el-button
      type="info"
      :class="operateValue ==='zxt1'? 'zxt-zxt1': 'zxt-zxt2'"
      @click="center1"
    >中心图1</el-button>
    <el-button
      type="info"
      :class="operateValue ==='zxt2' ? 'zxt-zxt1':'zxt-zxt2'"
      @click="center2"
    >中心图2</el-button>
    <el-button
      type="info"
      :class="operateValue ==='zxt3'? 'zxt-zxt1':'zxt-zxt2'"
      @click="center3"
    >中心图3</el-button>
    <!-- 身体 -->
    <div class="zxt-container">
      <div class="zxt-main" v-show="main">
        <div class="zxt-main1">
          <span class="zxt-text">
            中心图1: 建议尺寸：
            <a>1920*180</a>,支持png、jpg、jpeg格式
          </span>
          <el-upload
            action
            class="upload-demo"
            ref="upload"
            name="file"
            :show-file-list="false"
            :auto-upload="true"
            :http-request="uploadFile1"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
          <!-- 链接 -->
          <el-form ref="form1" :model="form1" label-width="120px">
            <el-form-item label="链接:">
              <el-input v-model="form1.name1" placeholder="请输入链接"></el-input>
            </el-form-item>
            <!-- 保存 -->
          </el-form>
          <el-button type="primary" @click="save_zhongxintu" class="zxt-pre">保存1</el-button>
          <!-- /链接 -->
        </div>
        <!-- 下面是新增内容尺寸1200*80 -->

        <!-- /下面是新增内容尺寸1200*80 -->
      </div>
      <div class="zxt-main4" v-show="main4">
        <span>
          中心图: 建议尺寸：
          <a href="#">1200*80</a>,支持png、jpg、jpeg格式
        </span>
        <el-upload
          action
          class="upload-demo"
          ref="upload"
          name="file"
          :show-file-list="false"
          :auto-upload="true"
          :http-request="uploadFile2"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
        <!-- 链接 -->
        <el-form ref="form2" :model="form2" label-width="120px">
          <el-form-item label="链接:">
            <el-input v-model="form2.name2" placeholder="请输入链接"></el-input>
          </el-form-item>
          <!-- 保存 -->
          <div @click="save_zhongxintu" class="zxt-pre2">
            <button>保存2</button>
          </div>
          <!-- /保存 -->
        </el-form>
        <!-- /链接 -->
      </div>
      <!-- 中心图3页面 -->
      <div class="zxt3" v-show="main5">
        <div class="zxt-main5" v-for="item of 8" :key="item.id">
          <div class="zxt-main5_1">
            <div class="text6">图片:</div>
            <el-upload
              action
              class="upload-demo"
              ref="upload"
              name="file"
              :show-file-list="false"
              :auto-upload="true"
              :http-request="uploadFile3"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>

            <div class="text7">
              <span>
                中心图: 建议尺寸：
                <a href="#">288*124</a>,支持png、jpg、jpeg格式
              </span>
            </div>
            <!-- 链接 -->
          </div>
          <div class="forms">
            <el-form ref="form3" :model="form3" label-width="120px">
              <el-form-item label="链接:">
                <el-input v-model="form3.name3" placeholder="请输入链接"></el-input>
              </el-form-item>
            </el-form>
            <!-- /链接 -->
          </div>
          <!-- 保存 -->
          <div class="zxt-pre3" @click="save_zhongxintu">
            <el-button type="primary" class="zxt-pre3_3">保存3</el-button>
          </div>
          <!-- /保存 -->
        </div>
      </div>
      <!-- /身体 -->
    </div>
  </div>
  <!-- /头部 -->
</template>

<script> export default {
  data () {
    return {
      // 所有数据
      image: { sPicUrl: '', sPicLink: '' },
      imageall1: [],
      imageall2: [],
      imageall3: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imagess: {},
      jeishouyh: [],
      form1: {
        name1: '',
        img1: ''
      },
      form2: {
        name2: '',
        img2: ''
      },
      form3: {
        name3: '',
        img3: ''
      },
      hidder: false,
      main: true,
      main4: false,
      main5: false,
      operateValue: 'zxt1',
      abc: '',
      //图片上传服务器
      PostAddpictureEmpty1: [],
      PostAddpictureEmpty2: [],
      PostAddpictureEmpty3: [],
      postUrl1: '',
      postUrl2: '',
      postUrl3: '',
      //修改
      UpdatepictureEmpty: [],
      nPicid: '',

    };
  },
  created () {
    this.GetAllpictures()
  },
  methods: {
    //图片上传服务器   中心图1  picture1   中心图2  picture2  中心图3  picture3
    //中心图1上传服务器
    //上传中心图1图片
    uploadFile1 (param) {
      console.log(param.file);
      this.postUrl1 = param.file;
      console.log(param.file.name);
      let uploadData = new FormData();
      uploadData.append('file', param.file);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    },
    //上传中心图2图片
    uploadFile2 (param) {
      console.log(param.file);
      this.postUrl2 = param.file;
      console.log(param.file.name);
      let uploadData = new FormData();
      uploadData.append('file', param.file);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    },
    //上传中心图3图片
    uploadFile3 (param) {
      console.log(param.file);
      this.postUrl3 = param.file;
      console.log(param.file.name);
      let uploadData = new FormData();
      uploadData.append('file', param.file);
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
    },


    async save_zhongxintu () {
      if (this.operateValue == 'zxt1') {
        this.server_pic1()
      } else if (this.operateValue == 'zxt2') {
        this.server_pic2()
      } else if (this.operateValue == 'zxt3') {
        this.server_pic3()
      }
    },


    //上传中心图1图片到服务器
    async server_pic1 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.postUrl1.name)
      formDataImg.append('file', this.postUrl1)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty = res
      if (this.form1.img1 == null || this.form1.img1 == '') {
        this.mysql_pic1()
      } else {
        this.Updatepicture()
      }
    },
    //新增中心图1图片接口
    async mysql_pic1 () {
      let formData = new FormData()
      formData.append('nTid', 4)
      formData.append('sPicUrl', this.PostAddpictureEmpty1)
      formData.append('sPicLink', this.postUrl1.name)
      formData.append('sPicture', "设置中心图")
      formData.append('nOrder', 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_Addpicture', formData, config)
      console.log(res);
      let a = { insPicLink: this.form1.name1, insPicUrl: this.form1.img1 }
      this.imageall1.unshift(a)
      this.imageall1
      this.form1.name1 = ''
    },

    //上传中心图2图片到服务器
    async server_pic2 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.postUrl2.name)
      formDataImg.append('file', this.postUrl2)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty2 = res

      if (this.form2.img2 == null || this.form2.img2 == '') {
        this.mysql_pic2()
      } else {
        this.Updatepicture()
      }
    },
    //新增中心图2图片接口
    async mysql_pic2 () {
      let formData = new FormData()
      formData.append('nTid', 6)
      formData.append('sPicUrl', this.PostAddpictureEmpty2)
      formData.append('sPicLink', this.postUrl2.name)
      formData.append('sPicture', "设置中心图")
      formData.append('nOrder', 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_Addpicture', formData, config)
      console.log(res);
      let a = { insPicLink: this.form2.name2, insPicUrl: this.form2.img2 }
      this.imageall2.unshift(a)
      this.imageall2
      this.form2.name2 = ''
      //this.picture1()
    },

    //上传中心图3图片到服务器
    async server_pic3 () {
      const config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      }
      let formDataImg = new FormData()
      formDataImg.append('sPicUrl', this.postUrl3.name)
      formDataImg.append('file', this.postUrl3)
      const { data: res } = await this.$http.post('/api/SingleImageUpload/Post', formDataImg, config)
      console.log(res, 'img')
      this.PostAddpictureEmpty3 = res

      if (this.form3.img3 == null || this.form3.img3 == '') {
        this.mysql_pic3()
      } else {
        this.Updatepicture()
      }
    },
    //新增中心图3图片接口
    async mysql_pic3 () {
      let formData = new FormData()
      formData.append('nTid', 7)
      formData.append('sPicUrl', this.PostAddpictureEmpty3)
      formData.append('sPicLink', this.postUrl3.name)
      formData.append('sPicture', "设置中心图")
      formData.append('nOrder', 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_Addpicture', formData, config)
      console.log(res);
      let a = { insPicLink: this.form3.name3, insPicUrl: this.form3.img3 }
      this.imageall3.unshift(a)
      this.imageall3
      this.form3.name3 = ''
      //this.picture1()
    },


    // 图片上传成功的回调
    changeFile (file, fileList) {
      this.fileUpload = file
    },

    // 获取所有图片
    async GetAllpictures () {
      const { data: res1 } = await this.$http.get('/api/picture/Get_Allpictures', {
        params: {
          innTid: 4
        }
      })
      if (res1.length > 0) {
        this.imageall1 = res1
        this.form1.img1 = this.imageall1[0].sPicUrl
        this.form1.name1 = this.imageall1[0].sPicLink
      }
      const { data: res2 } = await this.$http.get('/api/picture/Get_Allpictures', {
        params: {
          innTid: 6
        }
      })
      if (res2.length > 0) {
        this.imageall2 = res2
        this.form2.img2 = this.imageall2[0].sPicUrl
        this.form2.name2 = this.imageall2[0].sPicLink
      }

      const { data: res3 } = await this.$http.get('/api/picture/Get_Allpictures', {
        params: {
          innTid: 7
        }
      })
      if (res3.length > 0) {
        this.imageall3 = res3
        this.form3.img3 = this.imageall3[0].sPicUrl
        this.form3.name3 = this.imageall3[0].sPicLink
      }
    },
    //修改数据接口
    async Updatepicture () {
      let formData = new FormData()
      formData.append('nTid', 4)
      formData.append('sPicUrl', this.sPicUrl)
      formData.append('sPicLink', this.sPicLink)
      formData.append('sPicture', "设置中心图")
      formData.append('nState', 1)
      formData.append('nPicid', this.nPicid)
      formData.append('nOrder', 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/picture/Post_Updatepicture', formData, config)
      this.UpdatepictureEmpty = res
      console.log(res[0].row);
    },
    handleRemove (file) {
      console.log(file);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload (file) {
      console.log(file);
    },
    add () {
      this.hidder = true;
      this.main5 = false;
    },
    sure () {
      this.hidder = false;
    },
    center1 () {
      this.operateValue = 'zxt1'

      this.main = true;
      this.main4 = false;
      this.main5 = false;
    },
    center2 () {
      this.operateValue = 'zxt2'

      this.main = false;
      this.main4 = true;
      this.main5 = false;
    },
    center3 () {
      this.operateValue = 'zxt3'

      this.main = false;
      this.main4 = false;
      this.main5 = true;
      this.hidder = false;
    }
    //目前nTid 为固定值,要想拿取动态数据的话，需要在center中调用图片类型接口

  }

}
</script>
<style scoped lang="css" src="./assets/index.css" />
